<div class='main-nav'>
    <div class='navbar navbar-inverse'>
        <div class='navbar-header'>
            <button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse' [attr.aria-expanded]='isExpanded' (click)='toggle()'>
                <span class='sr-only'>Toggle navigation</span>
                <span class='icon-bar'></span>
                <span class='icon-bar'></span>
                <span class='icon-bar'></span>
            </button>
            <a class='navbar-brand' [routerLink]='["/"]'>{{ ListTitle }}</a>
        </div>
        <div class='clearfix'></div>
        <div class='navbar-collapse collapsed' [ngClass]='{ "in": isExpanded }'>
          <ul class='nav navbar-nav'>
            <li *ngFor="let report of reports">
              <a [routerLink]='["/view", report]' (click)='collapse()'>
                <span class='glyphicon glyphicon-th-list'></span> {{ report }}
              </a>
            </li>
          </ul>
        </div>
    </div>
</div>
